import React, { useState, useMemo, useEffect } from 'react';
import { cline, obj_str, obj_int, uJob, ColView, filter_list, useHigh, GridTable, filter_row, useCmd, WaitUmd, MainView, BtTxt,
    Title, d_sort, PanelFind, Btn, is_empty, loc } from 'sui';
import { get_data, get_col, fix_col } from './cmd';
import { load_col, load_supply } from 'stock/base/cmd';
import { useAccess } from 'cache';
import { DlgNum } from './ctl';

const SimpleView = ({ mod, submod, title, acc }) => {
    const [open_num, openNum] = useState(false);
    const [map_supply, mapSupply] = useState();
    const [col, setCol] = useState();
    const [high] = useHigh(140, 100);
    const [no_acc] = useAccess();
    const umd = useCmd(`file/list/${mod}`);

    useEffect(() => {
        load_col(mod, setCol);
        load_supply(submod, null, mapSupply);
    }, [mod, submod]);

    const getRow = useMemo(() => {
        let data = umd.value;
        if (!data) {
            return null;
        }

        const lst = filter_list(["sn"], col);
        const ret = filter_row(data, lst, umd.filter);

        d_sort(ret, "tech");

        return ret;
    }, [umd.value, umd.filter, col]);

    const hreturn = () => {
        load_col(mod, setCol);
        umd.hreturn();
    };

    if (umd.isFin("col")) {
        const list = [
            {sn: mod, name: title, fix: fix_col()},
        ];

        return <ColView hreturn={hreturn} title={title} subtitle={loc("l_221")} list={list} cur={mod}/>;
    }

    const pact = {
        "ok": () => openNum(true),
        "ng": () => openNum(true),
    };

    const act = {
        "ok": (v) => {
            umd.startWait();

            const cmd = {
                line: cline(),
                tp: submod,
                qa: "",
                sn: obj_str(umd.cur, "sn"),
                num: obj_int(v, "num"),
                snum: obj_int(v, "snum"),
                box: obj_int(v, "box"),
            };

            uJob(null, "stock/qa", cmd, r => umd.reload(umd.endWait), e => umd.setErr());
        },
        "ng": (v) => {
            umd.startWait();

            const cmd = {
                line: cline(),
                tp: submod,
                qa: "",
                sn: obj_str(umd.cur, "sn"),
                num: obj_int(v, "num"),
                snum: obj_int(v, "snum"),
                box: obj_int(v, "box"),
                ngson: obj_str(v, "ngson"),
            };

            uJob(null, "stock/defeat", cmd, r => umd.reload(umd.endWait), e => umd.setErr());
        }
    };

    const getCol = () => {
        if (is_empty(col)) {
            return null;
        }

        const tmp = [
            {name: loc("l_193"), key: 'index', width: 70, frozen: true},
            {name: loc("l_238"), key: 'e_opt', width: 138, frozen: true, formatter: props => {
                const d = props.row;
                return (
                    <div className="inline-flex">
                        <BtTxt hcmd={() => umd.pact(pact, d, "ok")} disabled={no_acc(acc)}>{loc("l_106")}</BtTxt>
                        <BtTxt hcmd={() => umd.pact(pact, d, "ng")} disabled={no_acc(acc)}>{loc("l_107")}</BtTxt>
                    </div>
                );
            }},
        ];

        get_col(col, tmp, map_supply);

        return tmp;
    };

    const Right = () => (
        <div className="inline-flex">
            <Btn className="mr-4" hcmd={() => umd.pact(null, null, "col")} disabled={no_acc(acc)}>{loc("l_221")}</Btn>
        </div>
    );

    const Left = () => <Title mod={title} sub={loc("l_769")}/>;

    return (
        <MainView>
            <PanelFind left={<Left/>} right={<Right/>} hcmd={umd.setFilter}/>
            <GridTable col={getCol()} row={getRow} high={high}/>
            <DlgNum open={open_num} setOpen={openNum} hcmd={v => umd.act(act, v)} data={get_data(umd, map_supply)} col={col} fin={umd.fin} mod={submod}/>
            <WaitUmd umd={umd}/>
        </MainView>
    );
};

export {SimpleView};
